<template>
  <div class="post-comment">
    <van-field
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="我来说一下我的想法"
        show-word-limit
        :border="false"
        ref="theTextarea"
        @blur="closeFn"
    />
    <!--    <van-button-->
    <!--      type="default"-->
    <!--      size="mini"-->
    <!--      class="pubBtn"-->
    <!--      :disabled="!message"-->
    <!--      >发表-->
    <!--&lt;!&ndash;      @click="onPsb"&ndash;&gt;-->
    <!--    </van-button>-->
    <div class="footer">
      <div class="pubBtn" @click="onPsb">发布</div>
    </div>
  </div>
</template>

<script>
// 加载axios的接口方法
import {addComment} from "../../../api/share";

export default {
  // 组件名
  name: 'postComment',
  // 定义props
  props: {
    // 如果是发布文章评论，则传递文章 ID
    // 如果是发布评论回复，则传递评论 ID
    target: {
      type: [String, Number, Object],
      required: true
    },
    // 如果是发布评论回复，则也需要传递文章 ID
    art_id: {
      type: [String, Number, Object],
      default: null // 没传 默认为 null
    }
  },
  // 定义变量
  data() {
    return {
      message: '' // 输入框内容
    }
  },
  // 生命周期函数
  created() {
    console.log(this.target,'传递的target')
  },
  // 定义方法函数
  methods: {
    // 对文章发表评论
    async onPsb() {
      this.$toast.loading({
        message: '发布中...',
        forbidClick: true // 禁止背景点击
      })
      try {
        const {data} = await addComment({
          id: this.target, // 评论的目标id（评论文章即为文章id 🌟🌟，对评论进行回复则为评论id)
          textContent: this.message, // 评论内容
          contentId: this.art_id ? this.art_id : null
        })
        // 处理效应结果
        this.$emit('post-scucces', data)
        this.$toast.success('发布成功！')
        // 发布成功，清空文本框内容
        this.message = ''
      } catch (err) {
        console.log(err)
        this.$toast.fail('发布失败！')
      }
    },
    // 失去焦点自动关闭弹窗
    closeFn() {
      // 如果输入框没有内容且失去焦点，自动关闭弹窗
      if (!this.message) {
        this.$emit('close')
      }
    }
  },
  mounted() {
    // 自动聚焦
    // 注意：组件挂载后才能访问到 ref 对象
    setTimeout(()=>{
      this.$refs.theTextarea.focus()
    },500)
  },
  // 定义计算属性
  computed: {},
  // 定义侦听
  watch: {}
}
</script>
<style lang="less" scoped>
.post-comment {
  //display: flex;
  //align-items: center;
  padding: 14px;
  //height: 150px;

  .van-cell {
    margin-right: 8px;
    border: 1px solid #ebedf0;
    border-radius: 4px;
  }

  // 发表
  .footer {
    padding-top:5px;
    display: flex;
    justify-content: flex-end;

    .pubBtn {
      padding:2px;
      width: 51px;
      height: 21px;
      line-height: 21px;
      opacity: 1;
      border-radius: 3px;
      background: rgba(242, 150, 0, 1);
      font-size: 18px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
}
</style>
